<template>
  <div>
    <el-card>
      <el-descriptions class="margin-top" title="房屋图片信息" :column="2" border>
        <template slot="extra">
          <el-button type="primary" @click="addbox=true" size="small">增加</el-button>
        </template>

        <el-descriptions-item v-for="item in houserimg" :key="item.id">
          <template slot="label">
            <el-image class="img" :src="item.imgUrl" alt="" />
          </template>
          <el-button  @click="showEdit(item)" size="mini" type="primary" plain icon="el-icon-edit"></el-button><br>
          <el-button @click="showDel(item.id)" size="mini" type="danger" icon='el-icon-delete' ></el-button><br>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
     <!-- 新增房屋图片框  -->
     <el-dialog title="新增房屋图片" :append-to-body="true" :visible.sync="addbox">
      <el-form  >
        <el-form-item label="房屋图片" >
          <el-upload action="#" ref="mYupload" list-type="picture-card" :on-remove="handleRemove" :http-request="customUpload">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="addbox=false">取 消</el-button>
         <el-button @click="addImg" type="primary">确 定</el-button>
      </div>
      </el-dialog>
       <!-- 修改用户框  -->
     <el-dialog title="修改房屋图片" :append-to-body="true" :visible.sync="editbox">
      <el-form>
        <el-form-item label="修改房屋图片" >
          <el-upload action="#" ref="mYupload" clearFiles list-type="picture-card" :on-remove="updHandleRemove" :http-request="updCustomUpload">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="原图片预览" >
          <el-image style="width: 110px; height: 80px" :src="previewImage" id="yourFileInputId"></el-image>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="editbox=false">取 消</el-button>
         <el-button @click="updateimg" type="primary">确 定</el-button>
      </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
    data(){
        return{
          houserimg:[],
          editbox: false,  //显示修改框
          addbox: false ,  //显示新增框
          // 获取添加数据
          imginfoAdd:{
          file:[],
          hid:''
          },
          //获取修改房屋图片
          updfile:null,
          imginfoUpd:{
          id:'',
          hid:''
          },
          previewImage:null
        }
    },
    created(){
      this.getHouserimg();
    },
    methods:{
      async showDel(id){
      let ok=await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err);
        if(ok!='confirm'){
          return this.$message.info('你取消了删除')
        }
        let ret=await this.$http.delete(`/admin/imginfo/delete/${id}`);
        if(ret.code != 200){
           return this.$message.error(ret.message )
        }
        this.$message.success(ret.message)
        this.getHouserimg();
    },
       //更新房屋图片
    async updateimg(){
      console.log(this.updfile);
      console.log(this.imginfoUpd);
      let formData = new FormData();
      formData.append("imgInfo", JSON.stringify(this.imginfoUpd)); // 正确使用 formData
      formData.append("file", this.updfile);
      console.log("sa", this.file);
      let ret = await this.$http.put('/admin/imginfo/upd', formData,)
      this.editbox=false;
      this.$refs['mYupload'].clearFiles();
      this.updfile=null;
      if(ret.code != 200){
           return this.$message.error(ret.message);
      }
      this.$message.success(ret.message)
      this.getHouserimg();
    },
    //获取修改数据
    showEdit(row){
      this.editbox=true;
      this.imginfoUpd.id=row.id;
      this.imginfoUpd.hid=row.hid;
      this.previewImage=row.imgUrl
    },
    // 更新删除图片
    updHandleRemove(file, fileList) {
      this.updfile=null;
      console.log(this.file);
    },
    // 更新获取房屋图片
    updCustomUpload(file){
      this.updfile=file.file;
    },
      //添加房屋图片
    async addImg(){
      const formData = new FormData();
      this.imginfoAdd.file.forEach((file) => {
        formData.append("file", file); // 使用相同的键名 "file"
      });
      let hid = this.$route.query.id;
      formData.append("hid", hid);
      let ret = await this.$http.post('/admin/imginfo/upload',formData);
      this.$refs['mYupload'].clearFiles();
      this.addbox=false;
      if(ret.code != 200){
           return this.$message.error(ret.message)
      }
      this.$message.success(ret.message)
      this.getHouserimg();
      },
    // 删除图片
      handleRemove(file, fileList) {
        const index = this.imginfoAdd.file.indexOf(file.file);
      // if (index > -1) {
        this.imginfoAdd.file.splice(index, 1);
      // }
      console.log(this.imginfoAdd.file);
      },
    //获取房屋图片
      customUpload(file){
       this.imginfoAdd.file.push(file.file);
       console.log(this.imginfoAdd);
      },
      async getHouserimg(){
        
        let id = this.$route.query.id;
        let ret = await this.$http.get(`/qiantai/my/byhid/${id}`);
        this.houserimg = ret.data;
        console.log(ret);
      }
    }
}
</script>

<style lang="less" scoped>
.img{
  width: 150px;
  height: 130px;
}
</style>